import {ComponentType} from 'react'
import Taro, {Component, Config} from '@tarojs/taro'
import {observer, inject} from '@tarojs/mobx'

import {Form, View, Textarea, Input, Button, Picker, Image} from '@tarojs/components'
import {IStoreProps} from '../../store/Stores'
import {
  educationArr, getRuntime,
  userSexArr, technicalTitleArr, workExperienceArr, workYearsArr,
  typeOfJobArr, monthlyPayArr, qualificationArr, registrationArr, servicePhoneNumber,
} from '../../utils/common'
import PageFooterInfo from '../../components/PageFooterInfo'
import { areaOptions } from '../../utils/area'


import './index.less'
import right from "../../assets/img/right.png";
import {toJS} from "mobx";


interface IHomeProps extends IStoreProps {
}

@inject("stores")
@observer
class Rresume extends Component<IHomeProps> {

  state = {
    publicationType: '4', // 发布类型 发布简历
    // 基本新
    positionName: '', // 求职标题
    name: '', // 求职人姓名
    userSexArr: userSexArr, // 性别
    userSex: userSexArr[0], // 性别
    userSexId: 1, // 性别
    userBirth: '', // 出生日期
    educationArr: educationArr, //学历
    education: educationArr[0], //学历
    graduationSchool: '', // 毕业院校
    professionalName: '', // 专业名称
    technicalTitleArr:[],
    technicalTitle:'', // 职称
    technicalTitleId:0,
    workYearsArr: workYearsArr, // 工作年限
    workYears: workYearsArr[0], // 工作年限

    // 求职信息
    typeOfJobArr: typeOfJobArr, // 求职类型;
    typeOfJob: typeOfJobArr[0], // 求职类型;
    typeOfJobId: 1, // 求职类型;
    positionOfJob: '',//求职职位
    intentionArea: '',//想在哪工作/意向地区
    intentionAreaCode: '',//想在哪工作/意向地区编码
    monthlyPayArr:monthlyPayArr, //月薪（期望薪资）
    monthlyPay: monthlyPayArr[0], //月薪（期望薪资）

    // 职业信息
    qualificationArr: qualificationArr, //执业资格
    qualification: '', //执业资格
    registrationArr: registrationArr,//注册情况
    registration: '',//注册情况
    practiceTime: '',//执业时间
    majorCategoryArr: '',//专业类别
    majorCategory: '',//专业类别
    majorCategoryId: 0,//专业类别
    practiceExplain: '',//执业资格信息描述
    description: '',//转会要求

    // 最近工作经历
    businessName: '', //企业名称
    jobPosition: '', //工作职位
    startDateTime: '', //开始时间
    endDateTime: '', //结束时间
    experienceExplain: '', //工作经验描述

    // 联系方式
    phone: '',
    wechatNo: '',
    qqNo: '',
    address: '',
    allProvince:[],
    provinceId:0,

    loading: false,
    disabled: false,
    submitText: '立即发布',
    allProvince:[],
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '发布简历'})
    this.getAllProvince()
    this.getAllTechnicalTitle()
    this.getAllMajorCategory()
  }

  config: Config = {
    navigationBarTitleText: '发布简历'
  }

  getAllTechnicalTitle() {
    let { TalentStore } = this.props.stores
    TalentStore.getAllTechnicalTitle({
      callback: res => {
        let resArr = toJS(res)
        console.log(resArr)
        this.setState({
          technicalTitleArr: res.items || [],
          technicalTitle: res.items[0]['titleName'] || '',
          technicalTitleId: res.items[0]['id'] || '',
        })
      }
    })
  }
  // 获取专业分类
  getAllMajorCategory() {
    let { TalentStore } = this.props.stores
    TalentStore.getAllMajorCategory({
      callback: res => {
        let resArr = toJS(res)
        // console.log(resArr)
        this.setState({
          majorCategoryArr: res.items || [],
          majorCategory: res.items[0]['majorCateName'] || '',
          majorCategoryId: res.items[0]['id'] || '',
        })
      }
    })
  }

  getAllProvince() {
    let { AreaStore } = this.props.stores
    AreaStore.getAllProvinceFromLocal({
      callBack: res => {
        this.setState({
          allProvince: res
        })
      }
    })
  }

  changePicker(type: string, e) {
    let index = e.detail.value
    this.setState({
      [type]: this.state[type + 'Arr'][index],
    })
    if(type === 'typeOfJob'){
      this.setState({
        typeOfJobId: index
      })
    }
    if(type === 'userSex'){
      this.setState({
        userSexId: index
      })
    }
  }

  // 日期选择器
  changeDate(type:string,e) {
    this.setState({
      [type]:e.detail.value
    })
  }

  // 职称选择
  changeTechnical(e){
    let index = e.detail.value || 0
    let { technicalTitleArr: t } = this.state
    this.setState({
      technicalTitle: t[index]['titleName'],
      technicalTitleId:t[index]['id']
    })
  }

  // 专业类别选择
  changeMajorCategory(e){
    let index = e.detail.value || 0
    let { majorCategoryArr: t } = this.state
    this.setState({
      majorCategory: t[index]['majorCateName'],
      majorCategoryId:t[index]['id']
    })
  }

  // 地址选择
  changeArea = e => {
    let { allProvince } = this.state
    let index = e.detail.value
    this.setState({
      intentionArea: allProvince[index]['label'],
      intentionAreaCode: allProvince[index]['value']
    })
  }

  formSubmit(e) {
    const {homeStore} = this.props.stores
    let {publicationType,userSexId,education,workYears,typeOfJobId,monthlyPay,registration,
     userBirth,intentionAreaCode,practiceTime,startDateTime,endDateTime,technicalTitleId,majorCategoryId} = this.state
    let {positionName,name,graduationSchool,professionalName,positionOfJob,qualification,
      practiceExplain,description,businessName,jobPosition,experienceExplain, phone,
      wechatNo,qqNo,address
      } = e.detail.value
    if (!positionName) {
      getRuntime().showToast('求职标题不能为空~')
      return
    }
    if (!name) {
      getRuntime().showToast('姓名不能为空~')
      return
    }
    if (!education) {
      getRuntime().showToast('学历不能为空~')
      return
    }
    if (!phone) {
      getRuntime().showToast('联系电话不能为空~')
      return
    }
    this.setState({
      loading: true,
      disabled: true,
      submitText: '数据提交中...'
    })
    homeStore.saveUserInfomations({
      form: {
        publicationType,
        positionName,
        name,
        userSex: userSexId+1,
        userBirth,
        education,
        graduationSchool,
        professionalName,
        technicalTitleId,
        workYears,
        typeOfJob: typeOfJobId+1,
        positionOfJob,
        intentionAreaCode,
        monthlyPay,
        qualification,
        registration,
        practiceTime,
        majorCategoryId,
        practiceExplain,
        description,
        businessName,
        jobPosition,
        startDateTime,
        endDateTime,
        experienceExplain,
        phone,
        wechatNo,
        qqNo,
        address
      },
      callBack: () => {
        this.setState({
          loading: false,
          disabled: false,
          submitText: '立即发布'
        })
        getRuntime().showToast('数据提交成功~')
        setTimeout( () => {
          getRuntime().navigateTo('/pages/newest/index')
        },2000)
      }
    })
  }

  render() {
    let { allProvince,intentionArea,userSexArr,educationArr,workYearsArr,typeOfJobArr,monthlyPayArr,registrationArr,technicalTitleArr,
      userSex,education,workYears,typeOfJob,monthlyPay,majorCategoryArr,majorCategory,registration,technicalTitle,userBirth,practiceTime,startDateTime,
      endDateTime,loading,disabled,submitText} = this.state
    return (
      <View className='from-wrap'>
        <Form onSubmit={this.formSubmit.bind(this)}>
          <View className='item-group-title'>－ 基本信息 －</View>
          <View className='item-group pt0 pb0'>
            <View className='input-group'>
              <View className='input-name is-require'>求职标题</View>
              <Input className='from-input' placeholder='请填写招求职标题(例：一级建造师)' placeholderClass='placeholder_class'
                     name='positionName' />
            </View>

            <View className='input-group'>
              <View className='input-name is-require'>姓名</View>
              <Input className='from-input' placeholderClass='placeholder_class'
                     placeholder='请输入您的姓名' name='name'/>
            </View>

            <View className='input-group '>
              <View className='input-name'>性别</View>
              <Picker className='input-picker' mode='selector' name='userSex' range={userSexArr}
                      onChange={this.changePicker.bind(this, 'userSex')}>
                <View className='tt'>
                  <View className='from-input picker-con'>{userSex}</View>
                  <Image className='drop-down-icon' src={right} />
                </View>
              </Picker>
            </View>

            <View className='input-group '>
              <View className='input-name'>出生年月</View>
              <Picker className='input-picker' mode='date' name='userBirth' range={this.state.selector}
                      onChange={this.changeDate.bind(this,'userBirth')} >
                <View className='tt'>
                  <View className='from-input picker-con'>{userBirth}</View>
                  <Image className='drop-down-icon' src={right} />
                </View>
              </Picker>
            </View>

            <View className='input-group pt0 pb0'>
              <View className='input-name'>学历</View>
              <Picker className='input-picker' mode='selector' name='education' range={educationArr}
                      onChange={this.changePicker.bind(this, 'education')}>
                <View className='tt'>
                  <View className='from-input picker-con'>{education}</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>

            <View className='input-group pt0 pb0'>
              <View className='input-name'>毕业院校</View>
             {/* <Picker className='input-picker' mode='selector' name='graduationSchool' range={this.state.selector}
                      onChange={this.onChange}>
                <View className='tt'>
                  <View className='from-input picker-con'>点击选择</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>*/}
              <Input className='from-input' placeholder='请填写毕业院校' placeholderClass='placeholder_class'
                     name='graduationSchool' />
            </View>

            <View className='input-group pt0 pb0'>
              <View className='input-name'>专业名称</View>
             {/* <Picker className='input-picker' mode='selector' name='professionalName' range={this.state.selector}
                      onChange={this.onChange}>
                <View className='tt'>
                  <View className='from-input picker-con'>点击选择</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>*/}
              <Input className='from-input' placeholder='请填写专业名称' placeholderClass='placeholder_class'
                     name='professionalName' />
            </View>

            <View className='input-group pt0 pb0'>
              <View className='input-name'>职称</View>
              <Picker className='input-picker' mode='multiSelector' name='technicalTitle' range={[technicalTitleArr]} rangeKey={'titleName'}
                      onChange={this.changeTechnical.bind(this)}>
                <View className='tt'>
                  <View className='from-input picker-con'>{technicalTitle}</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>

            <View className='input-group pt0 pb0'>
              <View className='input-name'>工作年限</View>
              <Picker className='input-picker' mode='selector' name='workYears' range={workYearsArr}
                      onChange={this.changePicker.bind(this, 'workYears')}>
                <View className='tt'>
                  <View className='from-input picker-con'>{workYears}年</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>
          </View>

          <View className='item-group-title'>－ 求职信息 －</View>
          <View className='item-group pt0 pb0'>
            <View className='input-group '>
              <View className='input-name'>求职类型</View>
              <Picker className='input-picker' mode='selector' name='typeOfJob' range={typeOfJobArr}
                      onChange={this.changePicker.bind(this, 'typeOfJob')}>
                <View className='tt'>
                  <View className='from-input picker-con'>{typeOfJob}</View>
                  <Image className='drop-down-icon' src={right} />
                </View>
              </Picker>
            </View>

            <View className='input-group '>
              <View className='input-name'>求职职位</View>
             {/* <Picker className='input-picker' mode='selector' name='positionOfJob' range={this.state.selector}
                      onChange={this.onChange}>
                <View className='tt'>
                  <View className='from-input picker-con'>点击选择</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>*/}
              <Input className='from-input' placeholder='请填写求职职位' placeholderClass='placeholder_class'
                     name='positionOfJob' />
            </View>


            <View className='input-group '>
              <View className='input-name'>想在哪工作</View>
              <Picker className='input-picker' mode='multiSelector' name='intentionArea' range={[allProvince]}
                      rangeKey={'label'}
                      onChange={this.changeArea.bind(this)}
              >
                <View className='tt'>
                  <View className='from-input picker-con'>{intentionArea}</View>
                  <Image className='drop-down-icon' src={right} />
                </View>
              </Picker>
            </View>


            <View className='input-group '>
              <View className='input-name'>月薪</View>
              <Picker className='input-picker' mode='selector' name='monthlyPay' range={monthlyPayArr}
                      onChange={this.changePicker.bind(this, 'monthlyPay')}>
                <View className='tt'>
                  <View className='from-input picker-con'>{monthlyPay}</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>
          </View>

          <View className='item-group-title'>－ 执业信息 －</View>
          <View className='item-group pt0 pb0'>
            <View className='input-group '>
              <View className='input-name'>执业资格</View>
              {/*<Picker className='input-picker' mode='selector' name='qualification' range={this.state.selector}
                      onChange={this.onChange}>
                <View className='tt'>
                  <View className='from-input picker-con'>点击选择</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>*/}
              <Input className='from-input' placeholder='请填写执业资格' placeholderClass='placeholder_class'
                     name='qualification' />
            </View>

            <View className='input-group '>
              <View className='input-name'>注册情况</View>
              <Picker className='input-picker' mode='selector' name='registration' range={registrationArr}
                      onChange={this.changePicker.bind(this, 'registration')}>
                <View className='tt'>
                  <View className='from-input picker-con'>{registration}</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>

            <View className='input-group '>
              <View className='input-name'>执业时间</View>
              <Picker className='input-picker' mode='date' name='practiceTime' range={this.state.selector}
                      onChange={this.changeDate.bind(this,'practiceTime')}>
                <View className='tt'>
                  <View className='from-input picker-con'>{practiceTime}</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>

            <View className='input-group '>
              <View className='input-name'>专业类别</View>
              <Picker className='input-picker' mode='multiSelector' name='majorCategoryId' range={[majorCategoryArr]} rangeKey={'majorCateName'}
                      onChange={this.changeMajorCategory.bind(this)}>
                <View className='tt'>
                  <View className='from-input picker-con'>{majorCategory}</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>

            <Textarea className='from-textarea height100' placeholderClass='placeholder-class'
                      placeholder='请填写执业资格信息(选填)'
                      maxlength={-1}
                      name='practiceExplain'
            />

          </View>


          <View className='item-group-title'>－ 转会要求 －</View>
          <View className='input-group pt0 pb0' style={{'margin-bottom': '10px'}}>
            <Textarea className='from-textarea' placeholderClass='placeholder-class'
                      placeholder='请填写转会要求(选填)'
                      maxlength={-1}
                      name='description'
            />
          </View>

          <View className='item-group-title'>－ 最近工作经历 －</View>
          <View className='item-group pt0 pb0'>
            <View className='input-group'>
              <View className='input-name'>企业名称</View>
              <Input className='from-input' placeholder='请填写联系人姓名' placeholderClass='placeholder_class'
                     name='businessName'
              />
            </View>

            <View className='input-group'>
              <View className='input-name'>工作职位</View>
              <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写工作职位' name='jobPosition'/>
            </View>

            <View className='input-group '>
              <View className='input-name'>开始时间</View>
              <Picker className='input-picker' mode='date' name='startDateTime' range={this.state.selector}
                      onChange={this.changeDate.bind(this,'startDateTime')}>
                <View className='tt'>
                  <View className='from-input picker-con'>{startDateTime}</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>

            <View className='input-group '>
              <View className='input-name'>结束时间</View>
              <Picker className='input-picker' mode='date' name='endDateTime' range={this.state.selector}
                      onChange={this.changeDate.bind(this,'endDateTime')}>
                <View className='tt'>
                  <View className='from-input picker-con'>{endDateTime}</View>
                  <Image className='drop-down-icon' src={right}/>
                </View>
              </Picker>
            </View>


            <Textarea className='from-textarea height100' placeholderClass='placeholder-class'
                      placeholder='请输入职位描述'
                      maxlength={-1}
                      name='experienceExplain'
            />

          </View>

          <View className='item-group-title'>－ 联系方式 －</View>
          <View className='item-group pt0 pb0'>
            <View className='input-group'>
              <View className='input-name'>联系人</View>
              <Input className='from-input' placeholder='请填写联系人姓名' placeholderClass='placeholder_class'
                     name='contacts'
              />
            </View>

            <View className='input-group'>
              <View className='input-name'>联系电话</View>
              <Input className='from-input' type={"number"} maxLength={11} placeholderClass='placeholder_class' placeholder='请填写联系电话' name='phone'/>
            </View>

            <View className='input-group '>
              <View className='input-name'>微信号</View>
              <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写微信号' name='wechatNo'/>
            </View>

            <View className='input-group'>
              <View className='input-name'>QQ号</View>
              <Input className='from-input' type={"number"} placeholderClass='placeholder_class' placeholder='请填写QQ号' name='qqNo'/>
            </View>

            <View className='input-group '>
              <View className='input-name'>联系地址</View>
              <Input className='from-input' placeholderClass='placeholder_class' placeholder='请填写联系地址' name='address'/>
            </View>
          </View>

          <Button className='from-submit' type="primary" formType="submit" loading={loading} disabled={disabled}>{submitText}</Button>

          <PageFooterInfo info={'咨询热线：'+servicePhoneNumber} />
        </Form>
      </View>
    )
  }
}

export default Rresume
